/*
 * @mainFrame.vue
 * @description 项目前端页面框架
 * @author huangchuanshan
 * @update (chenzhihui 2020/3/28)
 */
<template>
<div class="home">
  <!--项目标题-->
  <div class="top-background"><img src="../static/image/logo.png" alt="" class="logostyle"></div>
  <!--树形导航-->
  <div class="leftcontent">
    <el-tree
            accordion
            class="filter-tree choseTree"
            node-key="id"
            :data="dataTree"
            :props="defaultProps"
            @node-click="handleNodeClick"
    ></el-tree>
  </div>
  <!--右侧管理页面主体-->
  <div class="main">
    <div class="tab">
      <router-view></router-view>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    name: "MainFrame",
    data(){
      return{
        dataTree:[ {label: '人员信息', id: '1',},{label: '通讯录', id: '2',},{label: '任务管理', id: '3',}],
       /* zddata:[{
          nationality:[]
        }],*/
        defaultProps:{
          children: 'children',
          label: 'label'
        },
      }
    } ,
    watch:{

    },
    components:{
    },
    mounted() {
    },
    methods:{
      handleNodeClick(data){
        if(data.id=='1'){
          this.$router.push("/PersonInfo")
          this.$store.state.dataFlag = true;
        }
        if(data.id=='2'){
          this.$router.push("/txl")
          this.$store.state.dataFlag = false;
        }
        if(data.id=='3'){
          this.$router.push("/fagl")
        }
      }
    }
  }
</script>

<style lang="less">
  #app {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .home{
    height: 100%;
    .top-background{
      background-color: #0081dc;
      color: white;
      height: 90px;
      width: 100%;
      font-weight: 700;
      font-size: 30px;
      .logostyle{
        padding-left: 65px;
        padding-top: 20px;
      }
    }
    .leftcontent{
      width: 250px;
      height: calc(100% - 90px);
      background-color: #0081dc;
      .el-tree{
        padding-top: 50px;
      }
    }
    .choseTree{
      color: white;
      background-color: #0081dc;
      .el-tree-node__content{
        height: 48px;
        font-size: 16px;
        text-align:center;
        display: block;
        align-items: center;
      }
      .el-tree-node__expand-icon.is-leaf{
        display: none;
      }
      .el-tree-node__content:hover{
        background-color: rgba(0,0,0,0.2);
      }
      .is-current{
        background-color: rgba(0,0,0,0.2);
      }
    }
    .main{
      position: absolute;
      top: 90px;
      left: 250px;
      width: calc(100% - 250px);
      height: calc(100% - 90px);
    }
  }

  .tab{
    width: calc(100% - 30px);
    height: calc(100% - 200px);
    position: absolute;
    .el-table__header-wrapper{
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 5px;
    }
  }

</style>
